<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>基本列表</title>
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 
				v-for指令:
						1.用于展示列表数据
						2.语法：v-for="(item, index) in xxx" :key="yyy"
						3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
		-->
    <!-- 准备好一个容器-->
    <div id="root">
      <!--遍历数组常用-->
      <h2>人员列表(遍历数组)</h2>
      <ul>
        <li v-for="(p,index) of persons" :key="index">{{p.name}}-{{p.age}}</li>
      </ul>
      <!--遍历对象-->
      <h2>汽车信息（遍历对象）</h2>
      <ul>
        <li v-for="(value,k) in car" :key="k">{{k}}-{{value}}</li>
      </ul>
      <!--遍历字符串-->
      <h2>测试遍历字符串（用的少）</h2>
      <ul>
        <li v-for="(char,index) in str" :key="index">{{char}}-{{index}}</li>
      </ul>
      <!--遍历指定次数-->
      <h2>测试遍历次数（用的少）</h2>
      <ul>
        <li v-for="(number,index) of 5" ::key="index">{{index}}-{{number}}</li>
      </ul>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
      el: '#root',
      data: {
        persons: [
          { id: '001', name: '张三', age: 18 },
          { id: '002', name: '李四', age: 19 },
          { id: '003', name: '王五', age: 20 },
        ],
        car: {
          name: '奥迪',
          price: '70万',
          color: '黑色',
        },
        str: 'hello',
      },
    })
  </script>
</html>
